<template>
  <div id="descriptions">
    <template>
      <el-avatar shape="square" :size="300" :src="renderObj.headimgurl"></el-avatar>
    </template>
    <div class="minecenter">
      <!-- <p class="wdzx">我的中心</p> -->
      <el-row class="btn_box">
        <el-input placeholder="请输入图片地址" v-model="headimgurl" clearable> </el-input>
        <el-button type="primary" plain class="btn_xg" @click="xgAvatar"
          >修改头像</el-button
        >
      </el-row>
    </div>
    <el-descriptions title="我的信息">
      <el-descriptions-item label="unid">{{ renderObj.unid }}</el-descriptions-item>
      <el-descriptions-item label="账号">{{ renderObj.username }}</el-descriptions-item>
      <el-descriptions-item label="vip等级">{{
        renderObj.vipLevel
      }}</el-descriptions-item>
      <el-descriptions-item label="vip到期时间">
        <el-tag size="small">{{ renderObj.vipExpires }}</el-tag>
      </el-descriptions-item>
      <el-descriptions-item label="昵称">
        <el-tag size="small">{{ renderObj.roleName }}</el-tag>
      </el-descriptions-item>
      <el-descriptions-item label="手机号">{{ renderObj.phone }}</el-descriptions-item>
      <el-descriptions-item label="角色名称">{{
        renderObj.roleName
      }}</el-descriptions-item>
      <el-descriptions-item label="性别">
        <el-tag size="small">{{ renderObj.sex }}</el-tag></el-descriptions-item
      >
      <el-descriptions-item label="省份">{{ renderObj.province }}</el-descriptions-item>
      <el-descriptions-item label="城市">{{ renderObj.city }}</el-descriptions-item>
    </el-descriptions>
  </div>
</template>
<script>
import * as api from "@/api";
export default {
  data() {
    return {
      renderObj: {},
      headimgurl: "",
    };
  },
  created() {
    this.fn();
  },
  methods: {
    fn() {
      this.renderObj = JSON.parse(localStorage.getItem("qf-userInfo"));
      console.log(JSON.parse(localStorage.getItem("qf-userInfo")));
    },
    xgAvatar() {
      if(this.headimgurl){
        api.updateUserAvatar(this.headimgurl, this.renderObj.unid)
      .then(res=>{
        if(res.data.state){
          console.log(res);
          this.$message({
          showClose: true,
          message: '图片上传成功',
          type: 'success'
          });
        }else{
          this.$message({
          showClose: true,
          message: '图片上传失败',
          type: 'error'
          });
        }
      })
      }else{
        this.$message({
          showClose: true,
          message: '请输入头像图片地址',
          type: 'error'
          });
      }
    },
  },
};
//从本地拿账户信息 渲染
</script>
